html {
    height: 100%; /* Asegura que el elemento html ocupe toda la altura */
}


.header {
    height: 35px;
    padding-top: 1px;
    padding-right: 0px;
    padding-left: 0px;
    background-color: #8a4301;
    color: #ceab10;
    width: 110%;
    text-align: left;
    align-content: center; 
    margin-top: -18px;
    margin-left: -18px;
}

.header span {
    display: none;
    text-align: left;        /* Alinea el texto a la izquierda */
    font-size: 12pt;
    margin-left: 5px;
}

#boton_menu {
    margin-left: auto;       /* Asegura que la imagen esté alineada a la derecha */
    position: absolute;
    right: 10px;
    margin-top: -16px;
    transition: transform 0.3s;      /* Añade una transición suave al efecto */
}


.menu:hover {
    transform: scale(1.1);            /* Efecto de aumentar al pasar el mouse */
}

.menu-desplegable {
    position: absolute; /* Para que el menú se superponga */
    background-color: #ceab10; /* Color de fondo del menú */
    border: 1px solid #ceab10; /* Borde del menú */
    z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
    right: 0; /* Posiciona el menú a la derecha */
    margin-top: 20px;
    /* Puedes ajustar 'top' según el espacio que desees entre el botón y el menú */
}

.menu-item {
    padding: 8px; /* Espaciado de 12px */
    display: flex; /* Para alinear el icono y el texto */
    align-items: center; /* Centra verticalmente */
    font-size: 8pt;
    color: #070600;
}

.menu-item img.icono {
    margin-right: 6px; /* Espacio entre el icono y el texto */
    width: 16px; /* Tamaño del icono */
    height: 16px; /* Tamaño del icono */
}

.menu-item:hover {
    background-color: #8a4301; /* Color de fondo al pasar el mouse */
}






body {
    height: 100%;
    padding: 0px;
    margin: 0px;
    background: linear-gradient(to bottom right, #ceab10, #8a4301);/* Apply a linear gradient */
    /* Ensure the gradient covers the entire viewport */
    
}

#logo {
    display: flex;               /* Usar flexbox */
    justify-content: center;     /* Centrar horizontalmente */
    align-items: center;     
    height: 160px;               /* Puedes ajustar la altura según tus necesidades */
    
}

#logo img {
    width: 80%;  
    height: auto; 
    max-width: 320px;
    margin-top: 120px;
}

#contenedor {
    display: flex;
    flex-direction: column;
    height: 100vh;              /* Usa 100vh para ocupar toda la altura de la ventana */
    width: 100vh;
    align-items: center;         /* Centrar horizontalmente */
    justify-content: center;     /* Centrar verticalmente */
    margin: 0;                  /* Elimina el margen por defecto */
    max-width: 320px;
    max-height: 480px;
    
}

#reproductor {
    /* display: none;               Usar none para ocultar */
    display: flex;               /* Usar flexbox para centrar */
    flex-direction: column;      /* Colocar elementos en columna */
    align-items: center;         /* Centrar horizontalmente */
    /* justify-content: center;     Centrar verticalmente */
    height: 30vh;               /* Altura del contenedor para centrar verticalmente */
    margin-top: -40px;          /* Mover el contenedor 40px hacia arriba */
}

#sonic_art {
    margin: 10px 0;             /* Espaciado entre elementos */
    margin-top: -60px;
}
#sonic_title {
    margin: 10px 0;             /* Espaciado entre elementos */
    margin-top: -10px;

}

#controles {
        /* display: none;               Usar none para ocultar */
        display: flex;               /* Usar flexbox para centrar */
        flex-direction: column;      /* Colocar elementos en columna */
        align-items: center;         /* Centrar horizontalmente */
        /* justify-content: center;     Centrar verticalmente */
        height: 23vh;               /* Altura del contenedor para centrar verticalmente */
        margin-top: 150px;          /* Mover el contenedor 100px hacia arriba */
        text-decoration: none;    /* Quitar azul a los links */

        
}

.volume-bar {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 6px 0 6px;

  }
  
  .volume-bar
  .volume-range {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #535250;
  border-radius: 10px;
  }

  .volumeIcon {
    font-size: 12px;
  }

#pie {
    position: fixed;  /* Fija la posición en relación a la ventana del navegador */
    bottom: 0;       /* Coloca la división en el margen inferior */
    left: 0;         /* Alinea a la izquierda */
    width: 100%;     /* Ancho completo */
    clear: both; /* Asegura que esta división esté debajo */ 
    margin-top: 0px; 
    text-align: center; /* Centrar el contenido (opcional) */
    padding: 10px;   /* Espaciado interno (opcional) */
    font-size:6px;
    text-decoration: none;    /* Quitar azul a los links */
    color: black;
}